<template>

    <a-form ref="formRef" name="custom-validation" :model="formState" v-bind="layout" @finish="handleFinish">
        <a-row>
            <a-col :span="4">
                <a-form-item has-feedback label="流失编号" name="churn_id">
                    <a-input allowClear v-model:value="formState.churn_id" />
                </a-form-item>
            </a-col>
            <a-col :span="4">
                <a-form-item has-feedback label="客户姓名" name="cust_name">
                    <a-input allowClear v-model:value="formState.cust_name" />
                </a-form-item>
            </a-col>


            <a-col :span="4">
                <a-form-item has-feedback label="手机号码" name="mobile">
                    <a-input allowClear v-model:value="formState.mobile" />
                </a-form-item>
            </a-col>

            <a-col :span="4">
                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" html-type="submit">查询</a-button>
                </a-form-item>
            </a-col>
        </a-row>

    </a-form>


    <a-row>
        <a-table size="small" style="width: 100%;" :columns="columns" :data-source="data">
            <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex === 'name'">
                    <a>{{ text }}</a>
                </template>
                <template v-if="column.dataIndex === 'action'">
                    <a type="primary" @click="handleEdit(record)">编辑</a>
                </template>
            </template>
        </a-table>
    </a-row>

    <a-row>
        <a-drawer v-model:open="open" class="custom-class" root-class-name="root-class-name" style="color: red"
            :title="addFormState.churn_id ? '编辑' : '新增'" placement="right">
            <a-form :rules="addRulesForm" ref="addFormRef" name="custom-validation" :model="addFormState"
                v-bind="layout" @finish="handleAddFinish">
                <a-form-item has-feedback label="流失编号" name="churn_id">
                    <a-input disabled v-model:value="addFormState.churn_id" />
                </a-form-item>
                <a-form-item has-feedback label="客户姓名" name="cust_name">
                    <a-input disabled v-model:value="addFormState.cust_name" />
                </a-form-item>
                <a-form-item has-feedback label="手机号码" name="mobile">
                    <a-input disabled v-model:value="addFormState.mobile" />
                </a-form-item>
                <a-form-item has-feedback label="流失日期" name="churn_date">
                    <a-date-picker style="width: 100%" format="YYYY-MM-DD" value-format="YYYY-MM-DD" disabled
                        v-model:value="addFormState.churn_date" />
                </a-form-item>
                <a-form-item has-feedback label="流失原因" name="reason">
                    <a-textarea v-model:value="addFormState.reason" />
                </a-form-item>
                <a-form-item has-feedback label="跟进人员" name="emp_id">
                    <a-select v-model:value="addFormState.emp_id">
                        <a-select-option v-for="item in followup_staff" :value="item.key">{{ item.name
                        }}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item has-feedback label="挽回策略" name="strategy">
                    <a-textarea v-model:value="addFormState.strategy" />
                </a-form-item>
                <a-form-item has-feedback label="是否成功挽回" name="recovered">
                    <a-select v-model:value="addFormState.recovered">
                        <a-select-option value="是">是</a-select-option>
                        <a-select-option value="否">否</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item has-feedback>
                    <a-col :span="24">
                        <a-flex justify="flex-end">
                            <a-button type="primary" style="margin-left: 10px" html-type="submit">保存</a-button>
                        </a-flex>
                    </a-col>
                </a-form-item>
            </a-form>
        </a-drawer>
    </a-row>
</template>
<script setup>
import { churn_record as service } from '@/api/modulesApi/churn_record'
import { message } from 'ant-design-vue'

const columns = [
    {
        title: '流失编号',
        dataIndex: 'churn_id',
        key: 'churn_id',
    },
    {
        title: '客户编号',
        dataIndex: 'cust_id',
        key: 'cust_id',
    },
    {
        title: '客户姓名',
        dataIndex: 'cust_name',
        key: 'cust_name',

    },
    {
        title: '手机号码',
        dataIndex: 'mobile',
        key: 'mobile',

    },
    {
        title: '流失日期',
        dataIndex: 'churn_date',
        key: 'churn_date',

    },
    {
        title: '流失原因',
        dataIndex: 'reason',
        key: 'reason',

    },
    // 跟进人员需要获取row的emp对象进行翻译成emp_name
    {
        title: '跟进人员',
        dataIndex: 'emp_id',
        key: 'emp_id',

        customRender: ({ text, record }) => {
            return record.emp ? record.emp.emp_name : ''
        }
    },
    {
        title: '挽回策略',
        dataIndex: 'strategy',
        key: 'strategy',

    },
    {
        title: '是否成功挽回',
        dataIndex: 'recovered',
        key: 'recovered',

    },

    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',

    },
];

const data = ref([

]);

import { reactive, ref } from 'vue';
const formRef = ref();
const formState = reactive({
    churn_id: '',
    cust_name: '',
    mobile: '',
});
const open = ref(false);

const addFormState = reactive({
    churn_id: '',
    cust_id: '',
    cust_name: '',
    mobile: '',
    churn_date: '',
    reason: '',
    emp_id: '',
    strategy: '',
    recovered: '',
});
const followup_staff = ref([]);
const addFormRef = ref();
const addRulesForm = {};


const handleAddFinish = async (values) => {
    console.log(values, addFormState);
    values.cust_id = addFormState.cust_id;
    let res = await service.updateChurnRecord(values)
    message.success('保存成功')
    getCustomerInfo()
    addFormRef.value.resetFields();
    open.value = false;
};

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 14 },
};

const handleFinish = (values) => {
    getCustomerInfo()
};

const get_followup_staff = async () => {
    const res = await service.get_followup_staff()
    followup_staff.value = res.data
}

const handleEdit = async (row) => {
    const res = await service.get_churn_record_info({
        churn_id: row.churn_id,
    })
    console.log(res.data)
    addFormState.churn_id = res.data[0].churn_id;
    addFormState.cust_id = res.data[0].cust_id;
    addFormState.cust_name = res.data[0].cust_name;
    addFormState.mobile = res.data[0].mobile;
    addFormState.churn_date = res.data[0].churn_date;
    addFormState.reason = res.data[0].reason;
    addFormState.emp_id = res.data[0].emp_id;
    addFormState.strategy = res.data[0].strategy;
    addFormState.recovered = res.data[0].recovered;
    open.value = true;
};


const getCustomerInfo = async () => {
    const res = await service.getChurnRecord({
        churn_id: formState.churn_id,
        cust_name: formState.cust_name,
        mobile: formState.mobile,
    })
    console.log(res)
    data.value = res.data
}

get_followup_staff()
getCustomerInfo()

</script>